<template>
  <div class="searchlist">
    <div class="lt_searchBox">
      <form action="">
        <input type="text" class="lt_searchKey">
        <span class="lt_searchBtn">搜索</span>
      </form>
    </div>
    <!-- 排序结构 -->
    <div class="lt_sorder">
      <a href="javascript:;" data-order="time">上架时间
        <span class="fa fa-angle-down"></span>
      </a>
      <a href="javascript:;" data-order="price" @click="handerPrice" :class='{"active":isActive===0}'>价格
        <span :class='{"fa":true,"fa-angle-down":hasPrice,"fa-angle-up":!hasPrice}'></span>
      </a>
      <a href="javascript:;" data-order="num" @click="handerNum" :class="{'active':isActive===1}">销量
        <span :class='{"fa":true,"fa-angle-down":hasNum,"fa-angle-up":!hasNum}'></span>
      </a>
      <a href="javascript:;" data-order="discount">折扣
        <span class="fa fa-angle-down"></span>
      </a>
    </div>
    <!-- 上拉加载 -->
    <mt-loadmore ref="loadmore" :bottom-method='loadBottom' :bottom-all-loaded="allLoaded">
      <a href='javascript:;' @click="product(item.id)" class="lt_proBox" v-for='item in searchList' :key='item.id'>
        <img :src="'http://127.0.0.1:3000/'+item.pic[0].picAddr" alt="">
        <p class="line2">{{item.proName}}</p>
        <p>
          <span>&yen;{{item.price}}</span>
          <del>&yen;{{item.oldPrice}}</del>
        </p>
        <button class="mint-button mint-button--primary mint-button--small">
          <label class="mint-button-text">立即购买</label>
        </button>
      </a>
    </mt-loadmore>
  </div>
</template>

<script>
import { searchGoods } from '@/api/index.js'
export default {
  data () {
    return {
      price: 2,
      hasNum: true,
      isActive: '',
      hasPrice: true,
      key: '',
      searchList: [],
      page: 1,
      pageSize: 2,
      allLoaded: false
    }
  },
  mounted () {
    this.key = this.$route.params.key
    // searchGoods({ proName: this.key, page: this.page, pageSize: this.pageSize }).then(res => {
    //   this.searchList = res.data
    // })
  },
  methods: {
    product (id) {
      this.$router.push({ path: '/productDet', query: {id: id} })
    },
    // 销量排序
    handerNum () {
      this.isActive = 1
      this.hasNum = !this.hasNum
      // 重置价格的排序方式
      this.hasPrice = true
    },
    // 价格排序
    handerPrice () {
      this.hasPrice = !this.hasPrice
      if (this.hasPrice) {
        this.price = 2
      } else {
        this.price = 1
      }
      this.isActive = 0
      // 重置销量的排序方式
      this.hasNum = true
      searchGoods({
        proName: this.key,
        page: this.page,
        pageSize: this.pageSize,
        price: this.price
      }).then(res => {
        this.searchList = res.data
      })
    },
    loadBottom () {
      searchGoods({
        proName: this.key,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        this.searchList.push(...res.data)
        if (res.data.length === 0) {
          this.allLoaded = true
        }
        this.$refs.loadmore.onBottomLoaded()
      })
    }
  }
}
</script>

<style lang='scss' scoped>
.line2 {
  display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
  overflow: hidden;
  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
  -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
}
.mint-loadmore {
  padding-bottom: 60px;
}
.lt_searchBox {
  padding: 10px 10px 0;
  position: relative;
  input {
    width: 100%;
    height: 30px;
    border: none;
    border: 1px solid #1a70a6;
    border-radius: 5px;
    margin-bottom: 0px;
  }
  span {
    width: 60px;
    height: 30px;
    background-color: #1a70a6;
    border-radius: 0px 5px 5px 0px;
    color: #fff;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
  }
}
.lt_sorder {
  width: 100%;
  display: flex;
  background-color: #ddd;
  margin: 10px 0px;
  > a {
    flex: 1;
    font-size: 13px;
    line-height: 30px;
    text-align: center;
    color: #333;
    -webkit-tap-highlight-color: transparent;
    &.active {
      color: orange;
    }
  }
}
.lt_proBox {
  width: 48%;
  border: 1px solid #ddd;
  box-shadow: 0px 0px 2px #ccc;
  float: left;
  margin-bottom: 10px;
  > img {
    width: 100%;
    display: block;
  }
  > p {
    font-size: 13px;
    padding: 0px 10px;
    text-align: center;
    color: #888;
    line-height: 16px;
  }
  > p:nth-of-type(2) {
    line-height: 30px;
    > span {
      color: #e92322;
    }
  }
  > button {
    display: block;
    margin: 10px auto;
  }
}
.lt_proBox:nth-of-type(even) {
  margin-left: 4%;
}
.searchlist {
  // height: 100%;
}
.mint-loadmore-content {
  // padding-bottom: 100px;
}
</style>
